<!--
 * @Author: 詹真琦(legendryztachi@gmail.com)
 * @Date: 2022-07-12 10:21:33
 * @LastEditors: 代琪 1529992814@qq.com
 * @LastEditTime: 2022-08-15 13:46:19
 * @FilePath: \code\ctp-static-portal-front\src\views\pagelayout\layout01\components\mainArea\index.vue
 * @Description: 最外层大框框
-->
<template>
  <div id="main-area">
    <template v-if="mainWidth > 0">
      <Row
        v-for="(item, index) in rowData"
        :data="item"
        :sectionThemeData="sectionThemeData"
        :mainWidth="mainWidth"
        :key="index"
      />
    </template>
  </div>
</template>
<script>
  import Row from './components/row';
  import Vue from 'vue';
  import emitter from '@/utils/global';

  Vue.component('Row', Row);

  export default {
    name: 'MainArea',
    props: {
      rowData: { type: Array, default: () => [] },
      sectionThemeData: { type: Object, default: () => {} },
    },
    data() {
      return {
        //最外层宽度
        mainWidth: 0,
      };
    },
    mounted() {
      console.log('this.rowData===========>', this.rowData);
      //设置最小高度
      this.setMinHeight();
      //设置最外层宽度
      emitter.subscribe('resize', () => {
        this.setMainWidth();
        this.$nextTick(() => {
          //宽度重置完成之后事件
          emitter.publish('resizeFinished');
        });
      });
      //切换空间之后也重新设置
      emitter.subscribe('changeSpaceAfter', this.setMainWidth.bind(this));
      this.setMainWidth();
    },
    methods: {
      /**
       * @description: 设置最小高度
       * @return {*}
       */
      setMinHeight() {
        let seeyonPortalHeaderH, topNavH, slideVPortalH, breadcrumbH, webStyleFooterH;
        seeyonPortalHeaderH = document.getElementById('seeyonPortalHeader');
        topNavH = document.getElementById('topNav');
        slideVPortalH = document.getElementById('slideVPortal');
        breadcrumbH = document.getElementById('breadcrumb');
        webStyleFooterH = document.getElementById('webStyleFooter');
        seeyonPortalHeaderH = seeyonPortalHeaderH != null ? seeyonPortalHeaderH.clientHeight : 0;
        topNavH = topNavH != null ? topNavH.clientHeight : 0;
        slideVPortalH = slideVPortalH != null ? slideVPortalH.clientHeight : 0;
        breadcrumbH = breadcrumbH != null ? breadcrumbH.clientHeight : 0;
        webStyleFooterH = webStyleFooterH != null ? webStyleFooterH.clientHeight : 0;

        let elementsH =
          seeyonPortalHeaderH + topNavH + slideVPortalH + breadcrumbH + webStyleFooterH;
        let minHeight = document.body.clientHeight - elementsH - 10;

        if (elementsH + minHeight < document.body.clientHeight) {
          $('#main-area').css({
            minHeight,
          });
        }
      },
      /**
       * @description: 设置最外层宽度
       * @return {*}
       */
      setMainWidth() {
        let layoutTheme = this.sectionThemeData.layoutTheme;
        const width = document.documentElement.clientWidth;
        this.mainWidth =
          layoutTheme.webStyleWidth === '%'
            ? width * (layoutTheme.webStyleWidthValue / 100)
            : layoutTheme.webStyleWidth === 'px'
            ? Number(layoutTheme.webStyleWidthValue)
            : width * 0.8;
      },
    },
  };
</script>
<style lang="scss" scoped>
  #main-area {
    padding: 10px 15px;
  }
</style>
